<!doctype html>
<html>
<head>
    <title>倔强的土豆</title>

    
        <meta charset="UTF-8">
<meta name="viewport", content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href='/public/css/screen.css'>
<link rel="stylesheet" href='/public/css/syntax.css'>
<link rel="stylesheet" href="/public/styles/default.css">
<script src="/public/js/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
    
</head>
<body>
    <div class="site">
        
            <div class="header">
            <div class="title">
    <a href="/">倔强的土豆</a>
    <a class="extra" href="/">home</a>
</div>
            </div>
        
        <!--
            <nav class="menu">
    <ul>
        <li>
            <a class="extra" href="/">分类</a></li>
        <li>
            <a class="extra" href="/">归档</a></li>
        <li>
            <a class="extra" href="/">标签</a></li>
    </ul>
</nav>
        -->
        
<div class="main">
    <p>弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
&lt;!--more--&gt;</p>
<h3 id="flexbox-">Flexbox 模型规范</h3>
<ol>
<li>2009年7月工作草案(display:box)</li>
<li>2011年03月工作草案(display:flexbox)</li>
<li>2011年11月工作草案(display:flexbox)</li>
<li>2012年03月工作草案(display:flexbox)</li>
<li>2012年06月工作草案(display:flex)</li>
<li>2012年09月候选推荐(display:flex)</li>
</ol>
<p>可以把Flexbox布局语法规范主要分成3种</p>
<pre><code class="lang-css">/* 旧版本(Old)， 2009年版 */
display:box; /* or display:inline-box*/
/* 混合版本（Hybrid），2011 年版本*/
display:flexbox; /* or display:inline-flexbox*/
/* 最新版本（modern）*/
display:flex; /* display:inline-flex */
</code></pre>
<h3 id="-flexbox-">旧版本Flexbox使用</h3>
<p>暂无内容</p>
<h3 id="-flexbox-">新版本Flexbox使用</h3>
<h4 id="-display">伸缩容器设置 display</h4>
<pre><code class="lang-css">display:flex | inline-flex
</code></pre>
<p>flex 设置为块伸缩容器 
inline-flex 设置为内联伸缩容器 </p>
<h4 id="-flex-orient">伸缩流方向 flex-orient</h4>
<pre><code class="lang-css">flex-orient:row | row-reverse | column | column-reverse
</code></pre>
<p>row 在ltr排版方式下从左向右排列；在rtl排版方式下从右向左排列
row-reverse 与row排列方向相反，在ltr排版方式下从右向左排列；在rtl排版方式下从左向右排列
column 类似于row,不过是从上到下排列
block-axis 类似于row-reverse,不过是从下到上排列</p>
<h4 id="-flex-wrap">伸缩换行 flex-wrap</h4>

</div>

        
            <div class="footer">
    <div class="contact">
        <p>
            <!--jjtudou-->
            <!--<br /> -->
            <!--<a href="https://codestarter.org/">Codestarter</a>,
            <a href="https://github.com/">GitHub</a>-->
            QQ:438678287 [SHINE TU] 
        </p>
    </div>
    <!--
    <div class="contact">
        <p>
            <a href="http://github.com/mojombo/">github.com/mojombo</a><br />
            <a href="http://twitter.com/mojombo/">twitter.com/mojombo</a><br />
        </p>
    </div>-->
    <!--<div class="rss">
        <a href="http://feeds.feedburner.com/tom-preston-werner">
            <img src="/images/rss.png" alt="Subscribe to RSS Feed" />
        </a>
    </div>-->
</div>
        
    </div>
</body>
</html>